<template>
  <div class="box">
    <div class="header">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="搜索热门演出"
          @search="onSearch"
          @cancel="onCancel"
          @clear="onClear"
        />
      </form>
    </div>
    <div class="main" v-if="hotSearchListBool">
      <h5>热门搜索</h5>
      <div class="hotSearchList">
        <span v-for="(item, index) in hotSearchList" :key="index" @click="goSearch(item)">{{item}}</span>
      </div>
    </div>
    <div v-else>
      <div class="searchList">
        <ul class="kindData" v-if="this.searchList.length !== 0">
          <li v-for="(itm, idx) in searchList" :key="idx" @click="goDetail(itm.proid)">
            <img :src="itm.pic" alt="" class="pic">
            <span class="city">{{itm.city_name}}</span>
            <div>
              <p>
                <img v-show="itm.method === 1" src="https://image.juooo.com/upload/i.png" alt="">
                {{itm.name}}
              </p>
              <span>{{itm.start_show_time.substring(0,10)}}&nbsp;{{itm.show_time_bottom}}&nbsp;{{itm.start_show_time.substring(11,16)}}</span>
              <span>{{'￥' + itm.min_price}}&nbsp;&nbsp;<b>起</b></span>
              <span><b>{{itm.support_desc}}</b></span>
            </div>
          </li>
        </ul>
        <div class="noSearchList" v-else>
          <img src="https://m.juooo.com/static/img/empty_icon.d1aca0e.png" alt="">
          <p>未找到相关内容</p>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
            <Prolist :prolist="prolist"></Prolist>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Toast, List, Loading } from 'vant'
import { search, getProList } from '@/api'
import Prolist from '@/components/proList'
Vue.use(Search)
Vue.use(Toast)
Vue.use(Loading)
Vue.use(List)
export default {
  data () {
    return {
      value: '',
      searchList: [],
      prolist: [],
      loading: false,
      finished: false,
      count: 1,
      hotSearchList: ['冰雪奇缘', '第一次约会', '摇滚红与黑', '魔女宅急便', '咖啡因', '猫CATS'],
      hotSearchListBool: true
    }
  },
  components: {
    Prolist
  },
  mounted () {
    // console.log(this.searchList)
    setTimeout(() => {
      this.loadingBool = false
    }, 500)
    getProList().then(res => {
      // console.log(res)
      this.prolist = res.data.data
    })
  },
  methods: {
    onSearch (val) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: '500'
      })
      setTimeout(() => {
        search({ value: val }).then(res => {
          this.searchList = res.data.data
          this.hotSearchListBool = false
        })
      }, 500)
    },
    onLoad () {
      // console.log('可以加载数据了')
      this.loading = true
      getProList({ limit: 20, count: this.count }).then(res => {
        // console.log(res)
        this.loading = false
        if (res.data.len === 0) {
          this.finished = true
        } else {
          this.prolist = [...this.prolist, ...res.data.data]
          this.count += 1
        }
      })
    },
    onCancel () {
      this.$router.replace('/home')
    },
    onClear () {
      this.value = ''
      this.searchList = []
      this.hotSearchListBool = true
    },
    goSearch (itm) {
      this.value = itm
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: '500'
      })
      setTimeout(() => {
        search({ value: this.value }).then(res => {
          this.searchList = res.data.data
          this.hotSearchListBool = false
        })
      }, 500)
    },
    goDetail (data) {
      this.$router.push({ path: '/detail', query: { proid: data } })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 3.45rem;
  height: auto;
  margin: 0.26rem 0.15rem;
  h5 {
    width: 100%;
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.14rem;
    text-align: left;
    margin-bottom: 0.2rem;
    font-weight: normal;
    color: #666666;
  }
  .hotSearchList {
    width: 100%;
    height: auto;
    span {
      float: left;
      padding: 0 0.25rem;
      height: 0.35rem;
      line-height: 0.35rem;
      text-align: center;
      background: #f5f5f5;
      border-radius: 0.05rem;
      color: #232323;
      margin-right: 0.13rem;
      margin-bottom: 0.13rem;
    }
  }
}
.kindData {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0.1rem 0.15rem;
  overflow: hidden;
  li {
    width: 49%;
    height: 3.68rem;
    border-radius: 0.04rem;
    overflow: hidden;
    float: left;
    margin-bottom: 0.08rem;
    background: #f5f5f5;
    position: relative;
    .pic {
      width: 100%;
      height: 2.31rem;
    }
    .city {
      position: absolute;
      padding: 0 0.05rem;
      height: 0.18rem;
      text-align: center;
      line-height: 0.18rem;
      background-image: linear-gradient(-45deg, rgba(38, 38, 38, 0.8), rgba(70, 68, 65, 0.8));
      right: 0.1rem;
      top: 0.05rem;
      color: #fefefe;
      font-size: 0.12rem;
      border-radius: 0.02rem;
    }
    div {
      width: 100%;
      height: 1.36rem;
      box-sizing: border-box;
      padding: 0.08rem 0.11rem 0.11rem 0.11rem;
      p {
        line-height: 0.2rem;
        color: #232323;
        font-size: 0.14rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-align: left;
        img {
          width: 0.33rem;
          height: 0.17rem;
          display: inline-block;
        }
      }
      span {
        width: 100%;
        height: 0.2rem;
        margin-top: 0.04rem;
        line-height: 0.2rem;
        display: block;
        text-align: left;
      }
      span:nth-of-type(1) {
        color: #666666;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:nth-of-type(2) {
        color: #ff6743;
        font-size: 0.15rem;
        b {
          font-weight: normal;
          font-size: 0.12rem;
          color: #999999;
        }
      }
      span:nth-of-type(3) {
        b {
          float: left;
          padding: 0 0.05rem;
          height: 0.18rem;
          line-height: 0.18rem;
          background: #FFF1D5;
          color: #FF6743;
          font-size: 0.12rem;
          font-weight: normal;
          border-radius: 0.05rem;
        }
      }
    }
  }
  li:nth-of-type(2n-1) {
    margin-right: 2%;
  }
}
.noSearchList {
  width: 100%;
  height: auto;
  margin: 0.5rem 0 0.45rem 0;
  text-align: center;
  img {
    width: 0.9rem;
    height: 0.65rem;
  }
  p {
    width: 100%;
    height: 0.2rem;
    margin-top: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.12rem;
    color: #999999;
  }
}
/deep/ .van-search__content {
  border-radius: 0.25rem;
}
/deep/ .van-field__control {
  font-size: 0.14rem;
}
/deep/ .van-loading--circular {
  text-align: center;
}
</style>
